/* Tabbar 图标样式 - CSS Sprite 版本 */
/* 由于无法直接创建PNG文件，使用CSS图标作为临时方案 */

.tabbar-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 20px;
  text-align: center;
  line-height: 24px;
}

/* 首页图标 */
.tabbar-icon-home::before {
  content: "🏠";
}

.tabbar-icon-home-active::before {
  content: "🏠";
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1583%) hue-rotate(204deg) brightness(100%) contrast(101%);
}

/* 分类图标 */
.tabbar-icon-category::before {
  content: "📦";
}

.tabbar-icon-category-active::before {
  content: "📦";
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1583%) hue-rotate(204deg) brightness(100%) contrast(101%);
}

/* 购物车图标 */
.tabbar-icon-cart::before {
  content: "🛒";
}

.tabbar-icon-cart-active::before {
  content: "🛒";
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1583%) hue-rotate(204deg) brightness(100%) contrast(101%);
}

/* 消息图标 */
.tabbar-icon-message::before {
  content: "💬";
}

.tabbar-icon-message-active::before {
  content: "💬";
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1583%) hue-rotate(204deg) brightness(100%) contrast(101%);
}

/* 我的图标 */
.tabbar-icon-profile::before {
  content: "👤";
}

.tabbar-icon-profile-active::before {
  content: "👤";
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1583%) hue-rotate(204deg) brightness(100%) contrast(101%);
}